<!--
 * @Author: zhangtingting
 * @Date: 2020-04-03 16:44:49
 * @LastEditTime: 2020-04-08 11:39:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /mall/src/pages/cart/components/invalidList.vue
 -->
<template>
  <view class="shelvesBox" :class="{'small': smallList}" v-if="shelvesList.length > 0">
    <view class="title">
      失效商品{{ shelvesList.length }}件
      <text class="color-main pull-right" style="font-size: 30rpx;" @click="clearList">一键清除</text>
    </view>
    <view
      class="shelvesList"
      v-for="(shelves, index) in shelvesList"
      :key="index"
	  :data-ui="index"
      @click="jumpTodetail(shelves.spuInfo.id)"
    >
	    <view class="checkbox checkDisabled" v-if="!smallList"></view>
      <image class="image" :src="shelves.spuInfo.mainImageUrl | resize(284)"></image>
      <view class="info">
        <view class="line2Ellipsis">
          {{ shelves.spuInfo.labelList | labelForm }}{{ shelves.spuInfo.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    shelvesList: {
      type: Array,
    },
    smallList: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    jumpTodetail(id) {
      this.$routeUtils.navigateTo({
        url: `/pages/goods/detail?spuId=${id}`,
      })
    },
    clearList() {
      this.$emit('clearInvalid')
    },
  },
}
</script>
<style lang="scss" scoped>
.shelvesBox {
  background: #fff;
  border-radius: 28rpx;
  padding: 24rpx;
  .title {
	  font-size: 32rpx;
    padding: 8rpx 0 32rpx 0;
  }
  .shelvesList {
    display: flex;
    margin-bottom: 48rpx;
    .image {
      width: 220rpx;
      height: 220rpx;
      border-radius: 28rpx;
      margin-right: 14rpx;
    }
    .info {
      color: #999;
      flex: 1;
    }
  }

  &.small {
    border-radius: 8rpx;
    .title {
      font-size: 28rpx;
    }
    .shelvesList {
      margin-bottom: 20rpx;
      .image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        margin-right: 14rpx;
      }
    }
  }
}

.checkbox {
	// margin: 0 24rpx;
	margin-right: 24rpx;
	margin-left: 0;
	min-width: 44rpx;
	min-height: 44rpx;
	max-height: 224rpx;
	background: url('https://ss.migudm.cn/malleoc/public/check.png') center no-repeat;
	background-size: 100%;
	&.on {
		background-image: url('https://ss.migudm.cn/malleoc/public/check_on.png');
	}
	&.checkDisabled {
		background-image: url('https://ss.migudm.cn/malleoc/public/check_ban.png');
	}
}
</style>
